<script lang="ts" setup>
import { ref } from 'vue';
const attentionText = ref<string>();
const attentionCheckbox = ref<boolean>(false);
const comingText = ref<string>();
const comingCheckbox = ref<boolean>(false);
const openAi = ref<boolean>(false);
const openOneOfUs = ref<boolean>(false);
const checkboxLabel = (checkbox: boolean) => {
  return checkbox ? '禁用' : '启用';
};
</script>

<template>
  <div class="home-container attention-set-container pt8 pb8 pl8 pr8">
    <div class="flex-ali">
      <span class="font14">谁关注，回复：</span>
      <el-input v-model="attentionText" class="flex-auto ml8 mr8" size="large" placeholder="请输入回复内容" />
      <el-checkbox v-model="attentionCheckbox" :label="checkboxLabel(attentionCheckbox)" />
    </div>
    <div class="flex-ali mt8">
      <span class="font14">谁来了，回复：</span>
      <el-input v-model="comingText" class="flex-auto ml8 mr8" size="large" placeholder="请输入回复内容" />
      <el-checkbox v-model="comingCheckbox" :label="checkboxLabel(comingCheckbox)" />
    </div>
    <div class="flex-jct">
      <el-checkbox v-model="openAi" label="开启智能AI客服" />
      <el-checkbox v-model="openOneOfUs" label="是否回复自己人" />
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
